﻿@section scripts{
    <link href="~/Content/js/vendors/jsPanel/jquery.jspanel.css" rel="stylesheet" />
    <script src="~/Content/js/vendors/jsPanel/jquery.jspanel.js"></script>
    <script type="text/javascript">
        var oTable;
        var ProInfo;
        $(function () {
            $("#system").removeClass("right-menu").addClass("right-menu-active");
            $("#Role").addClass("active");
            oTable = $('#pTable').dataTable({
                 "oLanguage": {
                     "sUrl": "@Url.Content("~/Content/js/vendors/DataTables/dataTables.chinese.txt")"
                 },
                "bServerSide": true,
                "sAjaxSource": path + "Role/GetRoleList",      //mvc后台ajax调用接口
                'bPaginate': true,                      //是否分页。
                "bProcessing": true,                    //当datatable获取数据时候是否显示正在处理提示信息。
                'bFilter': false,                       //是否使用内置的过滤功能。
                "bSort": false,
                "iDisplayLength": 10,                   //每页显示的行数
                "bLengthChange": false,                 //允许用户从一个选择菜单中格式化页面大小(改变页面显示的数据数量)
                'sPaginationType': 'full_numbers',      //分页样式
                "fnServerParams": function (aoData) {
                    aoData.push({ "name": "NAME", "value": "" });
                },
                "aoColumns": [
                    { "mData": "Id", "sTitle": "主键", "bVisible": false, "bSearchable": false, "bSortable": false },
                    { "mData": "ROLENAME", "sTitle": "角色名称", "sWidth": "20%" },
                    { "mData": "BYNAME", "sTitle": "别名", "sWidth": "20%" },
                    { "mData": "DEPICT", "sTitle": "描述", "sWidth": "20%" },

                    {
                        "sTitle": "操作",
                        "sWidth": "10%",
                        "mRender": function (data, type, full) {
                            var html = "";
                            html += "<a href='#' title='编辑' onclick='Edit(\"" + full.Id + "\")'><i class='fa fa-edit' style='font-size: 1.5em;'></i></a>&nbsp&nbsp";
                            html += "<a href='#' title='删除' onclick='Delete(\"" + full.Id + "\",\"" + full.ROLENAME + "\")'><i class='fa fa-trash-o' style='font-size: 1.5em;'></i></a>&nbsp&nbsp";
                            html += "<a href='#' title='查看' onclick='View(\"" + full.Id + "\")'><i class='fa fa-eye' style='font-size: 1.5em;'></i></a>&nbsp&nbsp";
                            return html;
                        }
                    }
                ]
            });
        });
        /*添加*/
        function Add() {
            var parturl = path + "Role/Create/"
            ProInfo = $.jsPanel({
                resizable: "disabled",
                id: 'Add',
                headerTitle: "角色信息添加",
                content: '<iframe src="' + parturl + '" width="100%" height="100%" frameborder="0" />',
                position: 'center',
                contentSize: { width: 1000, height: 260 },
                contentOverflow: 'hidden',
                theme: '#31435e',
                headerControls: {
                    controls: 'closeonly'
                }
            });
        }
        /*编辑*/
        function Edit(Id) {
            var parturl = path + "Role/Update/" + Id;
            ProInfo = $.jsPanel({
                resizable: "disabled",
                id: 'Edit',
                headerTitle: "角色信息编辑",
                content: '<iframe src="' + parturl + '" width="100%" height="100%" frameborder="0" />',
                position: 'center',
                contentSize: { width: 1000, height: 260 },
                contentOverflow: 'hidden',
                theme: '#31435e',
                headerControls: {
                    controls: 'closeonly'
                }
            });
        }
        /*查看*/
        function View(Id) {
            var parturl = path + "Role/Detail/" + Id;
            ProInfo = $.jsPanel({
                resizable: "disabled",
                id: 'View',
                headerTitle: "角色信息查看",
                content: '<iframe src="' + parturl + '" width="100%" height="100%" frameborder="0" />',
                position: 'center',
                contentSize: { width: 1000, height: 260 },
                contentOverflow: 'hidden',
                theme: '#31435e',
                headerControls: {
                    controls: 'closeonly'
                }
            });
        }

        /*删除*/
        function Delete(Id, name) {
            parent.confirm("<div class='notyContent'>确定要删除【" + name + "】的信息吗？</div>",
                "project", function () {
                    $.ajax({
                        url: path + "Role/Delete/" + Id,
                        success: function (result) {
                            if (result == "true") {
                                noty({ text: "删除成功！", type: "success", layout: "topCenter", timeout: 2000 });
                                oTable.fnDraw();
                            } else {
                                noty({ text: "删除失败！", type: "error", layout: "topCenter", timeout: 2000 });
                            }
                        }
                    });
                }, null,
                '确定', '取消');
        }
        function AlertInfo(content, typeInfo) {
            noty({ text: content, type: typeInfo, layout: "topCenter", timeout: 2000 });
            if (typeInfo == 'success') {
                ProInfo.close();
                oTable.fnDraw();
            }
        };
    </script>
}
<nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
    <div class="cbp-hsinner">
        <ul class="cbp-hsmenu">
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </div>
    <div class="cbp-hsmenubg"></div>
</nav>

<div class="breadcrumb clearfix">
    <ul>
        <li><a><i class="fa fa-home"></i></a></li>
        <li><a>系统管理</a></li>
        <li class="active">角色管理</li>
    </ul>
</div>

<div class="row" id="powerwidgets">
    <div class="col-md-12 bootstrap-grid sortable-grid ui-sortable">
        <div class="powerwidget powerwidget-sortable" id="datatable-basic-init" data-widget-editbutton="false" role="widget" style="">
            <div class="inner-spacer">
                <div id="table-1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                    <div class="row">
                        <div class="col-xs-6">
                           
                        </div>
                        <div class="col-xs-6">
                            <button type="button" class="btn btn-info" style="float:right; font-size:1.2em;padding: 6px 12px;" onclick="Add()">
                                <i class="fa fa-eraser"></i>&nbsp;&nbsp;新增
                            </button>
                        </div>
                    </div>
                    <table class="table table-striped table-hover dataTable" id="pTable" aria-describedby="table-1_info"></table>
                </div>
            </div>
        </div>
    </div>
</div>
